<template>
  <div class="radioMore">
    <!-- 顶部 -->
    <div class="goTop">
      <div class="top">
        <van-nav-bar
          title="歌单"
          right-text="···"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </div>
      <div class="content">
        <div class="left">
          <img :src="pic" />
        </div>
        <div class="right">
          <div>古风情书:听一宿梵唱,许一世柔情</div>
          <div>
            <img src="../../public/headportrait.png" alt />
            <span>阿兮同学</span>
            <span>+ 关注</span>
          </div>
          <div>简介:一曲琴韵的瑟瑟,悲欢离合...></div>
        </div>
      </div>
      <div class="show">
        <div>
          <van-icon name="like-o" />
          <span>24.4万</span>
        </div>
        <div>
          <van-icon name="more-o" />
          <span>504</span>
        </div>
        <div>
          <van-icon name="share-o" />
          <span>分享</span>
        </div>
      </div>
    </div>
    <!-- search -->
    <div class="serach">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          autofocus
        />
      </form>
    </div>
    <!-- list -->
    <ul class="ulItem">
      <li
        class="listItem"
        v-for="(item,index) in datalist"
        :key="item.id"
        @click="getMId(item,index)"
      >
        <span>{{index+1}}</span>
        <div>
          <div class="txt1">{{item.name}}</div>
          <div class="txt2">{{item.singer}}</div>
        </div>
        <van-icon name="play-circle-o" />
        <van-icon name="ellipsis" />
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data: () => ({
    value: '周杰伦',
    datalist: [],
    pic: '',
  }),
  methods: {
    async getMId(item) {
      try {
        this.mId = item.mid
        const res = await this.$http.getMusicPlay(item.mid)
        this.musicGo = res.data.response.playLists[0]
        this.$router.push({
          name: 'radioMorelist',
          query: {
            id: item.mid,
            pic: this.pic
          }
        })
      } catch (error) {
        Toast('该歌曲为VIP歌曲,请充值')
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      Toast('按钮');
    },
    async onSearch() {
      try {
        const res = await this.$http.getSmartbox(this.value)
        this.datalist = res.data.response.data.song.itemlist
        this.pic = res.data.response.data.album.itemlist[0].pic
        console.log(this.pic);
        this.value = ''
      } catch (error) {
        Toast('亲,没有相关的信息')
      }
    },
  },
  created() {
    this.onSearch()
  }
}
</script>
<style lang="scss">
.radioMore {
  // 一区域
  .goTop {
    background-color: rgb(198, 162, 235);
    color: #fff;
    .content {
      padding-top: 30px;
      padding-bottom: 30px;
      display: flex;
      justify-content: space-around;
      .left {
        img {
          width: 140px;
          height: 140px;
          border-radius: 15px;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div {
          &:nth-child(1) {
            width: 220px;
            font-size: 18px;
          }
          &:nth-child(2) {
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            width: 220px;
            font-size: 18px;
          }
        }
        flex-direction: column;
        align-items: center;
      }
    }
    .show {
      display: flex;
      justify-content: space-around;
      padding-bottom: 30px;
      font-size: 18px;
    }
  }
  //
  .van-search {
    .van-search__content {
      border-radius: 15px;
    }
  }
  .ulItem {
    font-size: 18px;
    .listItem {
      display: flex;
      justify-content: space-around;
      height: 50px;
      align-items: center;
      .txt1 {
        font-size: 14px;
      }
      .txt2 {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>